<template>
  <t-drawer
    v-model:visible="show"
    :header="plugin.t('btn.search')"
    :footer="false"
    size="1000px"
    attach="body"
    :closeBtn="true"
    :showOverlay="false"
  >
    <template #body>
      <t-row :gutter="20">
        <t-col :span="6">
          <t-input v-model="keyword" @change="onSearch" autofocus clearable>
            <template #prefixIcon>
              <t-icon name="search" />
            </template>
          </t-input>
        </t-col>
        <t-col :span="6">
          <SupplierSelect v-model="supplier" @change="onSearch" />
        </t-col>
      </t-row>
      <t-table
        row-key="id"
        table-layout="auto"
        :data="list"
        :columns="columns"
        :loading="loading"
        style="margin-top: 10px"
        hover
        @row-click="onRowClick"
        activeRowType="single"
      >
        <template #name="{ row }">
          <b>{{ row.name }}</b>
        </template>
        <template #price_cost="{ row }">
          <t-button variant="outline" size="small" @click.stop="onSelect(row, 'price_cost')">
            {{ app.money.format(row.price_cost) }}
          </t-button>
        </template>
        <template #price="{ row }">
          <t-button variant="outline" size="small" @click.stop="onSelect(row)">
            {{ app.money.format(row.price) }}
          </t-button>
        </template>
        <template #price_two="{ row }">
          <t-button variant="outline" size="small" @click.stop="onSelect(row, 'price_two')">
            {{ app.money.format(row.price_two) }}
          </t-button>
        </template>
        <template #price_discount="{ row }">
          <t-button variant="outline" size="small" @click.stop="onSelect(row, 'price_discount')">
            {{ app.money.format(row.price_discount) }}
          </t-button>
        </template>
        <template #count="{ row }">
          <t-tag :theme="row.count <= row.count_min ? 'warning' : 'primary'" variant="light">{{ row.count }}</t-tag>
        </template>
      </t-table>
    </template>
  </t-drawer>
</template>
<script setup>
  import { ref } from 'vue'
  import app from '@/app'
  import { get } from '@/api/store/goods'
  import index from '../index'
  import SupplierSelect from '@/plugin/supplier/components/select.vue'

  const props = defineProps(['price', 'two', 'discount', 'cost', 'append']) 
  const emit = defineEmits(['post'])
  const plugin = index.plugin
  
  const show = ref(false)
  const list = ref([])
  const keyword = ref('')
  const supplier = ref(0)
  const loading = ref(false)
  const columns = [{
    title: plugin.t('form.number'),
    colKey: 'number',
    fixed: 'left',
  }, {
    title: plugin.t('form.code'),
    colKey: 'code',
  }, {
    title: plugin.t('form.name'),
    colKey: 'name',
    cell: 'name'
  }, {
    title: plugin.t('form.count'),
    colKey: 'count',
    cell: 'count',
    align: 'center'
  }]

  // 判断显示价格
  if(props.price) {
    columns.push({
      title: plugin.t('form.price'),
      colKey: 'price',
      cell: 'price',
      align: 'center'
    })
  }
  if(props.two) {
    columns.push({
      title: plugin.t('form.price_two'),
      colKey: 'price_two',
      cell: 'price_two',
      align: 'center'
    })
  }
  if(props.cost) {
    columns.push({
      title: plugin.t('form.price_cost'),
      colKey: 'price_cost',
      cell: 'price_cost',
      align: 'center'
    })
  }
  if(props.discount) {
    columns.push({
      title: plugin.t('form.price_discount'),
      colKey: 'price_discount',
      cell: 'price_discount',
      align: 'center'
    })
  }

  const open = () => {
    show.value = true
  }

  const close = () => {
    show.value = false
  }

  // 加载
  const getData = async () => {
    list.value = []
    await searchGoods('name')
    await searchGoods('code')
    await searchGoods('number')
    await searchGoods('sname')
    loading.value = false
  }

  // 查询商品
  const searchGoods = type => {
    return new Promise((resolve, reject) => {
      // 存在数据将不查询
      if(list.value.length) {
        return resolve()
      }
      get({ [type]: keyword.value, supplier_id: supplier.value > 0 ? supplier.value : null, append: props.append, page_size: 50 }).then(res => {
        list.value = res.data
        resolve()
      })
    })
  }

  // 定时查询
  let timer = {}
  const onSearch = async () => {
    loading.value = true
    clearTimeout(timer)
    timer = setTimeout(() => getData(), 500)
  }

  // 选择商品
  const onSelect = (item, priceType) => {
    const data = Object.assign({}, item)

    // 选中价格
    if(priceType) {
      data.price = data[priceType]
    }

    emit('post', data)
  }

  // 行点击
  const onRowClick = (row) => {
    if(props.price) {
      return onSelect(row.row, 'price')
    }
    if(props.two) {
      return onSelect(row.row, 'price_two')
    }
    if(props.discount) {
      return onSelect(row.row, 'price_discount')
    }
    if(props.cost) {
      return onSelect(row.row, 'price_cost')
    }
  }

  getData()

  defineExpose({ open, close })
</script>